<template>
	<div class="editProfile-container">
		<van-nav-bar
			title="个人信息编辑"
			left-text="返回"
			left-arrow
			@click-left="$router.back()"
			@click-right="onClickRight"
		>
			<template #right>
				<van-icon name="wap-home-o" size="20" />
			</template>
		</van-nav-bar>
		<div class="edit-main" v-for="item in userList" :key="item.id">
			<!-- 头像 -->
			<div class="avatar">
				<img :src="item.head_img" alt="" />
			</div>
			<!-- 头像 -->
			<div class="main-content">
				<van-cell
					title="昵称"
					is-link
					size="large"
					:value="item.nickname"
					:border="false"
					@click="showENNDialog = true"
				/>
				<van-cell
					title="密码"
					is-link
					size="large"
					value="******"
					:border="false"
					@click="showEPDDialog = true"
				/>
				<van-cell
					title="性别"
					is-link
					size="large"
					:value="item.gender == 1 ? '男' : '女'"
					:border="false"
					@click="showeditGender = true"
				/>
			</div>
		</div>
		<!-- ----------------------dialog-------------------------------------------- -->
		<!-- 编辑昵称 -->
		<van-dialog
			v-model="showENNDialog"
			title="编辑昵称"
			show-cancel-button
			@confirm="handelEditNiackName"
		>
			<van-field v-model="userList[0].nickname" required label="昵称" />
		</van-dialog>
		<!-- 编辑昵称 -->
		<!-- 编辑密码 -->
		<van-dialog
			v-model="showEPDDialog"
			title="编辑密码"
			show-cancel-button
			@confirm="handelEditPassWord"
		>
			<van-cell-group>
				<van-field
					type="password"
					v-model="userList[0].password"
					required
					label="原密码"
					placeholder="请输入原密码"
				/>
				<van-field
					type="password"
					v-model="rwpassword"
					required
					label="新密码"
					placeholder="请输入新密码"
				/>
			</van-cell-group>
		</van-dialog>
		<!-- 编辑密码 -->
		<!-- ----------------------dialog-------------------------------------------- -->
		<!-- -------------------action-sheet----------------------------------------->
		<van-action-sheet
			v-model="showeditGender"
			:actions="actions"
			@select="onSelect"
		/>
		<!-- -------------------- action-sheet------------------------------------>
	</div>
</template>

<script>
	import { editProfileApi } from "@/api/index";
	export default {
		name: "editProfile",
		data() {
			return {
				showENNDialog: false, //昵称Dialog
				showEPDDialog: false, //密码Dialog
				showeditGender: false, //性别 action-sheet
				rwpassword: "",
				userList: [],
				actions: [{ name: "男" }, { name: "女" }],
			};
		},
		methods: {
			onClickRight() {
				console.log("click right");
			},
			// 选择性别
			async onSelect(item) {
				this.showeditGender = false;
				const gender = item.name == "男" ? 1 : 2;
				const res = await editProfileApi({
					id: this.userList[0].id,
					data: { gender },
				});

				if (res.status == 200) {
					const {
						data: { data },
					} = res;
					this.userList = [data];
					this.$toast("修改成功");
				} else {
					this.$toast("修改失败");
				}
			},
			// 修改nickname
			async handelEditNiackName() {
				const res = await editProfileApi({
					id: this.userList[0].id,
					data: { nickname: this.userList[0].nickname },
				});

				if (res.status == 200) {
					const {
						data: { data },
					} = res;
					this.userList = [data];
					this.$toast("修改成功");
				} else {
					this.$toast("修改失败");
				}
			},
			// 修改密码
			async handelEditPassWord() {
				const res = await editProfileApi({
					id: this.userList[0].id,
					data: { password: this.rwpassword },
				});

				if (res.status == 200) {
					const {
						data: { data },
					} = res;
					this.userList = [data];
					this.$toast("修改成功");
				} else {
					this.$toast("修改失败");
				}
			},
		},
		created() {
			const {
				query: { userList },
			} = this.$route;
			this.userList = userList;
		},
	};
</script>

<style lang="less" scoped>
	/deep/.van-nav-bar {
		.van-nav-bar__title {
			font-size: 20px;
		}
		.van-nav-bar__text {
			color: unset;
		}
		.van-icon {
			color: unset;
		}
	}
	.edit-main {
		.avatar {
			text-align: center;
			margin-top: 20px;
			img {
				width: 180px;
				height: 180px;
				border-radius: 50%;
			}
		}
		.main-content {
			margin-top: 25px;
			/deep/.van-cell {
				border-bottom: 1px solid #eee;
				.van-cell__title {
					font-size: 18px;
					font-weight: 700;
				}
			}
		}
	}
</style>